<template>
	<view class="">
		<view class="title">
			<view :class="titindex==1?'active':''" @click="settitindex(1)"><text>我的奖励</text>
				<view class=""></view>
			</view>
			<view :class="titindex==2?'active':''" @click="settitindex(2)"><text>我的罚款</text>
				<view class=""></view>
			</view>
		</view>
		<view class="listbg">
			<view class="" v-for="(item,index) in list" :key="index">
				<view class="">
					<text>{{item.create_time || '暂无时间'}}</text>
					<text v-if="item.type == 1">+{{item.amount || '0'}}</text>
					<text class="green" v-else>-{{item.amount || '0'}}</text>
				</view>
				<text>原因：{{item.mark || '暂无原因'}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titindex: 1,
				loadingType: 0, //分页状态
				page: 1, //分页
				list: [], //获取列表
			}
		},
		watch: {
			//监听状态栏
			titindex(newValue) {
				this.loadingType = 0;
				this.page = 1;
				this.list = [];
				this.getList();
			}
		},
		onLoad(e) {},
		onShow() {
			this.page = 1;
			this.loadingType = 0;
			this.list = [];
			// 获取列表
			this.getList();
		},
		//上拉加载
		onReachBottom: function() {
			if (this.loadingType == 2) {
				return uni.showToast({
					title: '没有更多了',
					icon: 'none'
				})
			}
			if (this.loadingType != 0) { //loadingType!=0;直接返回
				return false;
			}
			if (this.option == 2) {
				return false;
			}
			this.goData.page++;
			uni.showNavigationBarLoading(); //显示加载动画				
			this.getList(); //请求
		},
		methods: {
			settitindex(e) {
				this.titindex = e
			},
			getList() {
				this.$request('buyer/assessment/list', {
					page: this.page, //分页
					type: this.titindex, //考核
				}, 'GET').then(res => {
					console.log(res, '考核列表');
					if (res.status == 200) {
						this.list.push(...res.data.data);
						console.log(this.list, 'list');
						uni.hideNavigationBarLoading(); //关闭加载动画
						//如果长度小于等于0说明没有分页
						if (res.data.data.length < 15) {
							this.loadingType = 2; //没有更多了	
						} else {
							this.loadingType = 0; //请求成功让他返回上拉加载	
						}
					}
				})
			},

		}
	}
</script>

<style>
	.green {
		color: #109C7A !important;
	}

	.listbg {
		width: 690rpx;
		margin-left: 30rpx;
	}

	.listbg>view {
		width: 100%;
		height: 156rpx;
		border-bottom: 1rpx solid #EEEEEE;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.listbg>view>view {
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #333333;
		display: flex;
		justify-content: space-between;
	}

	.listbg>view>view text:nth-of-type(2) {
		font-size: 32rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #F83535;
	}

	.listbg>view>text {

		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #666666;
		margin-top: 18rpx;
	}

	.title {
		width: 750rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		/* background: #FFFFFF; */
	}

	.title>view {
		width: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #666666;
	}

	.title>view>view {
		width: 50rpx;
		height: 8rpx;
		background: #FFFFFF;
		border-radius: 4rpx;
		margin-top: 15rpx;
	}

	.title>.active {
		font-weight: bold;
		color: #333333;
	}

	.title>.active>view {
		background: linear-gradient(64deg, #2BCCA5, #22B591);
	}
</style>
